* {
    margin: 0;
    padding: 0;
}
// 移动端iphoneX物理像素
@total-width: 750;
// 全局设置居中
.w {
    width: (693/40rem);
    margin: 0 auto;
}

html {
    //设置rem的比值
    font-size: (100vw/@total-width)*40;
    background-color: #eff0f4;
}

a {
    text-decoration: none;
}

.top-bar:extend(.w) {
    //设置弹性容器
    display: flex;

    height: (175/40rem);
    line-height: (175/40rem);;
    justify-content: space-between;
    align-items: center;

    a {
        color: #242538;
        font-size: (50/40rem);

        i {
            color: #999;
            font-size: (50/40rem);
        }
    }


}
// 中间背景图
.banner:extend(.w) {
    img {
        width: 100%;
        border-radius: 8%;
    }
}

// 设置中间菜单
.menu:extend(.w) {
    display: flex;
    height: (329 / 40rem);
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-evenly;

    a {
        height: (104/40rem);
        width: (327/40rem);
        color: white;
        border-radius: (10/40rem);
        line-height: (104/40rem);

        i {
            margin: 0 (20/40rem) 0 (38/40rem);
        }
    }

    .course {
        background-color: #f97053;
    }

    .star {
        background-color: #cd6efe;
    }

    .sub {
        background-color: #fe4479;
    }

    .download {
        background-color: #1bc4fb;
    }
}
// 题目列表
.course-list:extend(.w) {
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: (20/40rem);
        h2 {
            font-size: (33/40rem);
            color: #24253d;
            border-left: (3/40rem) solid #3a84ff;
            padding-left: (4/40rem);
        }
        a{
            font-size: (28/40rem);
            color: #656565;
        }
    }
}
// 课程列表
.item-list{
    height: (340/40rem);
    width:(720/40rem);
    overflow: auto;
    display: flex;
    margin-bottom: (40/40rem);
}
// 单个课程容器
.item{
    margin-right: (25/40rem);
    flex: none;
    box-sizing: border-box;
    padding: (10/40rem) (22/40rem) 0;
    width: (320/40rem);
    height: (324/40rem);
    background-color: #fff;
    box-shadow: 0 0 (10/40rem) rgba(0,0,0,.3);
    border-radius: (10/40rem);
    img{
      width: 100%;  
    }
    .course-title{
        font-size: (32/40rem);
        color: #24253d;
    }
    .user-info{
        display: flex;
    }
    .avatar{
        width: (42/40rem);
        height: (42/40rem);
        margin-right:(20/40rem);
    }
    .nickname{
        font-size: (24/40rem);
        color: #969393;
    }
}